import React,{Component} from 'react';
import { connect } from 'react-redux'
import styles from './help.scss';
import classNames from 'classnames/bind';
import { Item,Footer,Header} from '../components';
import {Layout,Breadcrumb} from 'antd';
import avatar from '../util/avatars/default.png';
import axios from 'axios';
import {API_ADDRESS} from '../util/address';


let cx = classNames.bind(styles);
const { Content} = Layout;
class HelpDoc extends Component
{
    constructor(props)
    {
        super(props);
        this.state={data:[...data],question:'',nums:{employee:0,analysis:0,attendance:0,insurance:0,process:0,salary:0,setting:0}};
        this.Searchkey=this.Searchkey.bind(this)
    }
    async Searchkey(value)
    {
        const {data}=await axios.get(`${API_ADDRESS}/question?q=${value}`);
        this.setState({data})
    }
    updateState()
    {
        let question=RegExp('[?&]q=([^&]*)',).exec(window.location.search);
        question=question && decodeURIComponent(question[1].replace(/\+/g,' '));
        if(question!==''&&question!==null)
        {
            this.setState({question:question})
            this.Searchkey(question)
        }
        else
        {
            this.setState({question:'',data:data})
        }
    }
    componentWillMount()
    {
        const {data}=this.props;
        let result={}
        data.map((d)=>{
            let len=0;
            for(let i=0;i<d.pages.length;i++)
            {
                if(d.pages[i].posted===true)
                    len++;
            }
            result[d.modulename]=len
        })
        this.setState({nums:result})
        this.updateState()

    }
    componentWillReceiveProps(nextProps)
    {
       this.updateState()
    }
    render()
    {
        const go=this.props.history.push
        return(
        <Layout className={cx("layout")}>
        <Header go={go}/>
        <Content style={{ padding: '0 50px' }}>
          <div style={{ minHeight: 650 }}>

          <div className={cx('help')}>
          {this.state.question!=''?<Breadcrumb style={{ margin: '16px 0' }}>
                                        <Breadcrumb.Item onClick={()=>{go('/')}}>所有集合</Breadcrumb.Item>
                                        <Breadcrumb.Item>搜索>>>{this.state.question}</Breadcrumb.Item>
                                    </Breadcrumb>
          :''}
               {
                   //帮助文档问题页
                    this.state.question!=''?this.state.data.map(
                       (c,index)=>{
                        let author=['微人事管理员'];
                        let num=c.url;
                       return (
                        <div style={{marginTop:'1rem'}} key={index}>
                               <Item data={{...c,avatar:[avatar],author,num:this.state.nums[c.url]}} onClick={()=>go(`/${c.url}`)}/>
                        </div>
                       )
                   })
                   :this.state.data.map((c,index)=>{
                       //帮助文档首页
                       let author=['微人事管理员']
                   return (
                    <div style={{marginTop:'1rem'}} key={index}>
                           <Item data={{...c,avatar:[avatar],author,num:this.state.nums[c.url]}} withIcon onClick={()=>go('/'+c.url)}/>
                    </div>
                   )
                   })
               }

       </div>
          </div>
        </Content>
        <Footer tips='微人事帮助中心'/>
      </Layout>
       )
    }
};

let data = [
    {image:'team',title:'员工',url:'employee'},
    {image:'idcard',title:'社保',url:'insurance'},
    {image:'schedule',title:'考勤',url:'attendance'},
    {image:'pay-circle-o',title:'薪酬',url:'salary'},
    {image:'api',title:'流程',url:'process'},
    {image:'line-chart',title:'统计分析',url:'analysis'},
    {image:'setting',title:'系统设置',url:'setting'},
];

export default connect(
        state => ({data: state.data})
    )(HelpDoc)
